import { View } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import styles from './index.module.scss';

const ProductTag = ({ product }) => {
  if (!product?.tagList?.length) {
    return null;
  }

  return (
    <View className="tags customePageStyle">
      {product?.tagList?.map((str) => {
        return (
          <View className="tag customeSalesPromotionLabelStyle" key={str}>
            <View className="txt">{str}</View>
          </View>
        );
      })}
    </View>
  );
};

const ProductTitle = ({ className = '', product }) => {
  return (
    <View className={`${styles.ProductTitleWithTags} ${className}`}>
      <View className={classNames('goods-title', { tag: product?.tagList?.length })}>
        {product?.title}
      </View>

      <ProductTag {...{ product }} />
    </View>
  );
};

export default ProductTitle;
